import {actions} from '../../../app/scripts/action';
import RTServer from '../../../app/scripts/rt-server';
import moment from 'moment';
import URL from 'url';

const HomeComponent = {
    data() {
        return {
            title: '',

            leftHostTeamName: '',
            leftGuestTeamName: '',
            leftHostScore: 0,
            leftGuestScore: 0,
            leftRound: '一',
            leftCountDownTime: '15:00',

            rightHostTeamName: '',
            rightGuestTeamName: '',
            rightHostScore: 0,
            rightGuestScore: 0,
            rightRound: '一',
            rightCountDownTime: '15:00',
        };
    },
    mounted() {
        const that = this;
        that.loadData();
        const parsedUrl = URL.parse(window.location.href);
        const host = that.$route.query.host || parsedUrl.host;
        const key = that.$route.query.key;
        RTServer.setServerUrl(`ws://${host}/admin?key=${key}`);
        RTServer.connect();
    },
    methods: {
        updateLeftBoardInfo: function () {
            const that = this;
            that.storeData();
            RTServer.send({
                action: actions.LEFT_INFO,
                data: {
                    title: that.title,
                    hostTeamName: that.leftHostTeamName,
                    guestTeamName: that.leftGuestTeamName,
                    hostScore: that.leftHostScore,
                    guestScore: that.leftGuestScore,
                    round: that.leftRound,
                }
            });
        },
        startLeftBoardCountDown: function () {
            const that = this;
            that.storeData();
            const countDownSecond = moment.duration(`00:${that.leftCountDownTime}`).as('seconds');
            RTServer.send({
                action: actions.LEFT_COUNT_DOWN,
                data: {
                    countDownSecond: countDownSecond,
                }
            });
        },
        updateRightBoardInfo: function () {
            const that = this;
            that.storeData();
            RTServer.send({
                action: actions.RIGHT_INFO,
                data: {
                    title: that.title,
                    hostTeamName: that.rightHostTeamName,
                    guestTeamName: that.rightGuestTeamName,
                    hostScore: that.rightHostScore,
                    guestScore: that.rightGuestScore,
                    round: that.rightRound,
                }
            });
        },
        startRightBoardCountDown: function () {
            const that = this;
            that.storeData();
            const countDownSecond = moment.duration(`00:${that.rightCountDownTime}`).as('seconds');
            RTServer.send({
                action: actions.RIGHT_COUNT_DOWN,
                data: {
                    countDownSecond: countDownSecond,
                }
            });
        },
        storeData: function () {
            const that = this;
            const data = _.pick(that, [
                'title',
                'leftHostTeamName',
                'leftGuestTeamName',
                'leftHostScore',
                'leftGuestScore',
                'leftRound',
                'leftCountDownTime',
                'rightHostTeamName',
                'rightGuestTeamName',
                'rightHostScore',
                'rightGuestScore',
                'rightRound',
                'rightCountDownTime',
            ]);
            localStorage.setItem('SCOREBOARD_ADMIN_DATA', JSON.stringify(data));
        },
        loadData: function () {
            const that = this;
            const storedData = localStorage.getItem('SCOREBOARD_ADMIN_DATA');
            if (storedData) {
                _.extend(that, JSON.parse(storedData));
            }
        },
        updateLeftHostScore: function (event) {
            let leftHostScore = parseInt(this.leftHostScore);
            if(event.keyCode == 40 && this.leftHostScore >0) {
                this.leftHostScore-=1
            }
            if(event.keyCode == 38) {
                leftHostScore+=1;
                this.leftHostScore = leftHostScore;
            }
            if(event.keyCode == 13) {
                this.updateLeftBoardInfo();
            }
        },
        updateLeftGuestScore: function (event) {
            let leftGuestScore = parseInt(this.leftGuestScore);
            if(event.keyCode == 40 && this.leftGuestScore >0) {
                this.leftGuestScore-=1
            }
            if(event.keyCode == 38) {
                leftGuestScore+=1;
                this.leftGuestScore = leftGuestScore;
            }
            if(event.keyCode == 13) {
                this.updateLeftBoardInfo();
            }
        },
        updateRightHostScore: function (event) {
            let rightHostScore = parseInt(this.rightHostScore);
            if(event.keyCode == 40 && this.rightHostScore >0) {
                this.rightHostScore-=1
            }
            if(event.keyCode == 38) {
                rightHostScore+=1;
                this.rightHostScore = rightHostScore;
            }
            if(event.keyCode == 13) {
                this.updateRightBoardInfo();
            }
        },
        updateRightGuestScore: function (event) {
            let rightGuestScore = parseInt(this.rightGuestScore);
            if(event.keyCode == 40 && this.rightGuestScore >0) {
                this.rightGuestScore-=1
            }
            if(event.keyCode == 38) {
                rightGuestScore+=1;
                this.rightGuestScore = rightGuestScore;
            }
            if(event.keyCode == 13) {
                this.updateRightBoardInfo();
            }
        },
        updateLeftRound: function (event) {
            if(event.keyCode == 40 && this.leftRound !='一') {
                switch (this.leftRound) {
                    case '二':
                        this.leftRound = '一';
                        break;
                    case '三':
                        this.leftRound = '二';
                        break;
                }
            }
            if(event.keyCode == 38) {
                switch (this.leftRound) {
                    case '一':
                        this.leftRound = '二';
                        break;
                    case '二':
                        this.leftRound = '三';
                        break;
                }
            }
            if(event.keyCode == 13) {
                this.updateLeftBoardInfo();
            }
        },
        updateRightRound: function (event) {
            if(event.keyCode == 40 && this.rightRound !='一') {
                switch (this.rightRound) {
                    case '二':
                        this.rightRound = '一';
                        break;
                    case '三':
                        this.rightRound = '二';
                        break;
                }
            }
            if(event.keyCode == 38) {
                switch (this.rightRound) {
                    case '一':
                        this.rightRound = '二';
                        break;
                    case '二':
                        this.rightRound = '三';
                        break;
                }
            }
            if(event.keyCode == 13) {
                this.updateRightBoardInfo();
            }
        },
        submitBoardInfo: function (event, submitType) {
            if(event.keyCode == 13) {
                switch (submitType) {
                    case 'title':
                        this.updateLeftBoardInfo();
                        this.updateRightBoardInfo();
                        break;
                    case 'left':
                        this.updateLeftBoardInfo();
                        break;
                    case 'leftTime':
                        this.startLeftBoardCountDown();
                        break;
                    case 'right':
                        this.updateRightBoardInfo();
                        break;
                    case 'rightTime':
                        this.startRightBoardCountDown();
                        break;
                }
            }
        },
        startAllBoardCountDown: function () {
            this.startLeftBoardCountDown();
            this.startRightBoardCountDown();
        }
    }
};

export default HomeComponent;
